<template>
  <div class="container"></div>
  <van-config-provider :theme-vars="themeVars">
    <!-- @click-tab="tabsChange" -->
    <van-tabs v-model:active="current" background="none">
      <van-tab
        :title="item.name"
        :key="item.name"
        v-for="item in list"
      ></van-tab>
    </van-tabs>
  </van-config-provider>
</template>

<!-- <script setup>
defineProps({
  test: {
    type: Array,
    default: () => [],
  },
});
</script> -->
<script>
console.log("import.meta.env", import.meta.env);
export default {
  data() {
    return {
      current: 0,
      list: [
        {
          name: "tab1",
        },
        {
          name: "tab2",
        },
        {
          name: "tab3",
        },
      ],
      themeVars: {
        tabFontSize: "0.4rem",
        tabsLineHeight: "0.7rem", // 改成0.69可以
        tabLineHeight: "0.7rem",
        tabsBottomBarColor: "#fff",
        tabsBottomBarHeight: ".05rem",
        tabsBottomBarWidth: "1.2rem",
        tabActiveTextColor: "#fff",
        tabTextColor: "#FAC589",
      },
    };
  },
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs);

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots);

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit);

    // 暴露公共属性（函数）
    console.log(context.expose);
  },
};
</script>
<style scoped lang="stylus">
.container {
  height: 100%;
  background-color: #fff;
}
</style>
